<template><div><h2 id="数据表格行内编辑" tabindex="-1"><a class="header-anchor" href="#数据表格行内编辑"><span>数据表格行内编辑</span></a></h2>
<p>数据表格所有使用行内编辑的列字段，都必须在<code v-pre>form</code>表单中定义一个相同的表单字段，否则将无法进行编辑。</p>
<h3 id="文本-editable" tabindex="-1"><a class="header-anchor" href="#文本-editable"><span>文本 (editable)</span></a></h3>
<p>启用</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'title'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">editable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 编辑成功后刷新页面</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'nickname'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">editable</span><span class="token punctuation">(</span><span class="token constant boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="@source/dcat-admin-2x/assets/images/051dd94f-5098-48a2-a186-e634bc1996f5-mX4Za4nj1y.png" alt=""></p>
<h3 id="开关-switch" tabindex="-1"><a class="header-anchor" href="#开关-switch"><span>开关 (switch)</span></a></h3>
<p>快速将列变成开关组件，使用方法如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">status</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">switch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>这个功能需要你在<code v-pre>form</code>表单方法中同样设置一个<code v-pre>status</code>字段</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">hidden</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'status'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$v</span> <span class="token operator">==</span> <span class="token string single-quoted-string">'打开'</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$v</span> <span class="token operator">?</span> <span class="token string single-quoted-string">'打开'</span> <span class="token punctuation">:</span> <span class="token string single-quoted-string">'关闭'</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 或者</span></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">switch</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'status'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$v</span> <span class="token operator">==</span> <span class="token string single-quoted-string">'打开'</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$v</span> <span class="token operator">?</span> <span class="token string single-quoted-string">'打开'</span> <span class="token punctuation">:</span> <span class="token string single-quoted-string">'关闭'</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>编辑成功后刷新页面</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'status'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">switch</span><span class="token punctuation">(</span><span class="token string single-quoted-string">''</span><span class="token punctuation">,</span> <span class="token constant boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="开关组-switchgroup" tabindex="-1"><a class="header-anchor" href="#开关组-switchgroup"><span>开关组 (switchGroup)</span></a></h3>
<blockquote>
<p>注意：在<code v-pre>grid</code>中对某字段设置<code v-pre>switchGroup</code>默认的保存结果是<code v-pre>0</code>或<code v-pre>1</code>，如需修改可以通过<code v-pre>$form-&gt;hidden(xxx)-&gt;saving(...)</code>方法修改。</p>
</blockquote>
<p>快速将列变成开关组件组，使用方法如下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">switch_group</span><span class="token operator">-></span><span class="token function">switchGroup</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'hot'</span>        <span class="token operator">=></span> <span class="token string single-quoted-string">'热门'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'new'</span>        <span class="token operator">=></span> <span class="token string single-quoted-string">'最新'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'recommend'</span>  <span class="token operator">=></span> <span class="token string single-quoted-string">'推荐'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'image.show'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'显示图片'</span><span class="token punctuation">,</span> <span class="token comment">// 更新对应关联模型</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 或</span></span>
<span class="line"><span class="token comment">// 不写label会自动从翻译文件翻译，具体使用请参照 “字段翻译” 章节</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">switch_group</span><span class="token operator">-></span><span class="token function">switchGroup</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'is_new'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'is_hot'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'published'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这个功能需要你在<code v-pre>form</code>表单方法中同样设置对应的字段</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">switch</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'hot'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$v</span> <span class="token operator">==</span> <span class="token string single-quoted-string">'打开'</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$v</span> <span class="token operator">?</span> <span class="token string single-quoted-string">'打开'</span> <span class="token punctuation">:</span> <span class="token string single-quoted-string">'关闭'</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$form</span><span class="token operator">-></span><span class="token function">switch</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'new'</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">customFormat</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$v</span> <span class="token operator">==</span> <span class="token string single-quoted-string">'打开'</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">saving</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$v</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$v</span> <span class="token operator">?</span> <span class="token string single-quoted-string">'打开'</span> <span class="token punctuation">:</span> <span class="token string single-quoted-string">'关闭'</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>编辑成功后刷新页面</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'switch_group'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">switchGroup</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token constant boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><img src="@source/dcat-admin-2x/assets/images/e344d0b6-5978-4a4e-b452-c809cc65bb02-JYfdc7Qd2I.png" alt=""></p>
<h3 id="下拉选框" tabindex="-1"><a class="header-anchor" href="#下拉选框"><span>下拉选框</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Sed ut perspiciatis unde omni'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'voluptatem accusantium doloremque'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'dicta sunt explicabo'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">4</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'laudantium, totam rem aperiam'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>select</code> 也支持参数为闭包，使用方法和<code v-pre>editable</code>的<code v-pre>select</code>类似。</p>
<p>编辑成功后刷新页面</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'options'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token constant boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><img src="@source/dcat-admin-2x/assets/images/a665230a-b0fb-46ba-8841-0c325d349777-fYwqtlPKqP.png" alt=""></p>
<h3 id="单选框" tabindex="-1"><a class="header-anchor" href="#单选框"><span>单选框</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">radio</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Sed ut perspiciatis unde omni'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'voluptatem accusantium doloremque'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'dicta sunt explicabo'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">4</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'laudantium, totam rem aperiam'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>radio</code> 也支持参数为闭包，使用方法和<code v-pre>editable</code>的<code v-pre>select</code>类似。</p>
<p>编辑成功后刷新页面</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'options'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">radio</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token constant boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="多选框" tabindex="-1"><a class="header-anchor" href="#多选框"><span>多选框</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">checkbox</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Sed ut perspiciatis unde omni'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'voluptatem accusantium doloremque'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'dicta sunt explicabo'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">4</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'laudantium, totam rem aperiam'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>checkbox</code> 也支持参数为闭包。</p>
<p>编辑成功后刷新页面</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'options'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">checkbox</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token constant boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><img src="@source/dcat-admin-2x/assets/images/495bad70-0ae8-4104-961f-6e083b53e12b-9A2GdY3nSx.png" alt=""></p>
<h3 id="textarea" tabindex="-1"><a class="header-anchor" href="#textarea"><span>textarea</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">column</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'...'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">textarea</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><img src="@source/dcat-admin-2x/assets/images/e64325d6-386b-4ce0-aec5-da0e328d7290-wViO5EoPBg.png" alt=""></p>
</div></template>


